<template>
    <div v-for="type in types">

        <div v-for="effect in effects">

            <div style="margin:10px">
                <div v-for="item in tags">
                    <div v-for="s in size">
                        <el-tag closable :size="s" :effect="effect" :type="type">
                            size:{{ size }} ,effect:{{ effect }},type:{{ type }}</el-tag>
                    </div>
                </div>

            </div>
        </div>
    </div>

</template>

<script setup lang="ts" name='Tag'>
import { ref, reactive } from "vue";

const tags = reactive([
    '标签一',
    '标签2',
    '标签3',
    '标签4',
    '标签5'
])


const size = reactive([
    '',
    'small',
    'large',

])
const effects = reactive([
    'dark',
    'light',
    'plain',

])
const types = reactive([
    'primary',
    'success',
    'info',
    'warning',
    'danger'

])




</script>

<style scoped></style>